<template>
  <el-dialog
    :model-value="refundDialogVisible"
    :destroy-on-close="true"
    title="退款"
    width="60%"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      prop="country_code"
      :rules="rules"
    >
      <el-form-item
        label="退款金额"
        :label-width="formLabelWidth"
        prop="refund_amount"
      >
        <el-input v-model="dialogForm.refund_amount" type="number" />
      </el-form-item>
      <el-form-item
        label="退款币种"
        :label-width="formLabelWidth"
        prop="currency"
      >
        <el-input v-model="dialogForm.currency" disabled />
      </el-form-item>
      <el-form-item
        label="备注"
        :label-width="formLabelWidth"
        prop="description"
      >
        <el-input v-model="dialogForm.description" type="textarea" rows="3" />
      </el-form-item>
      <el-form-item
        label="退款时间"
        :label-width="formLabelWidth"
        prop="refund_time"
      >
        <el-date-picker
          clearable
          v-model="dialogForm.refund_time"
          type="datetime"
          placeholder="请选择退款时间"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('refundCancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { formatDates, timestamp } from "@/utils/utils";

defineProps({
  refundDialogVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      order_no: "",
      refund_amount: "",
      description: "",
      currency: "",
      refund_time: "",
    },
  },
});

const emits = defineEmits(["closeDialog", "refundCancel", "submitForm"]);
const formLabelWidth = "140px";
const btnLoading = ref(false);
// 校验
const rules = {
  refund_amount: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  refund_time: [
    { required: true, message: "请选择退款时间", trigger: "change" },
  ],
};

const dialogFormRef = ref();
// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      let refund_time = 0;
      if (dialogForm.refund_time) {
        refund_time = timestamp(dialogForm.refund_time.valueOf());
      }
      try {
        const param = Object.assign(
          {},
          {
            order_no: dialogForm.order_no,
            currency: dialogForm.currency,
            refund_amount: dialogForm.refund_amount,
            refund_time: refund_time,
            description: dialogForm.description,
          }
        );
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};
</script>
